<template>
  <!-- ---采购管理--- -->
  <div class="incolumn">
    <div class="incolumn_countr">
      <div class="block">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="输入搜索" class="s1">
            <el-input v-model="formInline.key" placeholder="请输入合作公司" style="width:150%"></el-input>
          </el-form-item>
          <el-form-item label="输入时间" label-width="230px">
            <el-date-picker
              v-model="formInline.time1"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="chage"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onsubmit">查询</el-button>
          </el-form-item>
          <el-button class="ebtn" type="warning" @click="Newly">新增外协</el-button>
        </el-form>
      </div>
    </div>
    <div>
      <!-- ============================================================ -->
      <!-- ==================== 新增采购弹框 ===================== -->
      <!-- ============================================================ -->
      <el-dialog :visible.sync="dialogTableVisible" :modal-append-to-body="false" width="1200px">
        <div class="herd_bud"></div>
        <div class="from_bt">新增外协</div>
        <br />
        <p class="Purchase_Division"></p>
        <br />
        <el-form :model="formInlineBp" :inline="true" class="demo-form-inline" label-width="100px">
          <el-form-item label="企业名称">
            <el-input v-model="formInlineBp.enteraprisename"></el-input>
          </el-form-item>
          <el-form-item label="收货人">
            <el-input v-model="formInlineBp.consignee"></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="formInlineBp.tel"></el-input>
          </el-form-item>
          <el-form-item label="收货地址">
            <el-input v-model="formInlineBp.address"></el-input>
          </el-form-item>
        </el-form>
        <el-form :model="formInlineBp" class="demo-form-inline" label-width="110px">
          <el-form-item label="选择运输方式" style="font-weight: bold;">
            <el-radio-group v-model="radio">
              <el-radio label="快递"></el-radio>
              <el-radio label="物流"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <p class="Purchase_Division"></p>
        <div v-if="radio==='快递'">
          <el-form :model="formInlineBp" :inline="true" class="demo-form-inline" label-width="80px">
            <el-form-item label="快递公司">
              <el-select v-model="values">
                <el-option
                  v-for="item in optionBts"
                  :key="item.no"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="快递单号">
              <el-input v-model="formInlineBp.Dahao"></el-input>
            </el-form-item>
            <el-button type="primary">增加单号</el-button>
          </el-form>
        </div>
        <div v-if="radio==='物流'">
          <el-form
            :model="formInlineBp"
            :inline="true"
            class="demo-form-inline"
            label-width="120px"
          >
            <el-form-item label="快递公司">
              <el-select v-model="values">
                <el-option
                  v-for="item in optionBts"
                  :key="item.no"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="快递单号">
              <el-input v-model="formInlineBp.DaHao"></el-input>
            </el-form-item>
            <el-form-item label="车牌号">
              <el-input v-model="formInlineBp.carnumber"></el-input>
            </el-form-item>
            <el-form-item label="司机姓名">
              <el-input v-model="formInlineBp.drivername"></el-input>
            </el-form-item>
            <el-form-item label="司机联系方式">
              <el-input v-model="formInlineBp.drivertel"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="tow_tab_hed">货物信息</div>
        <br />
        <p class="Purchase_Division"></p>
        <el-table :data="tableDataBy" :height="300" :max-height="380" stripe>
          <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
          <el-table-column label="物料代码" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.materialno"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="物料名称" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.materialname"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="批次号" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.picihao"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="计量单位" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.unit"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="发货数量" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.number"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <p class="Purchase_Division"></p>
        <br />
        <div class="from_tab_btn">
          <el-button @click="getDataBys" type="primary" size="small">确认</el-button>
          <el-button @click="dialogTableVisible = false" type="info" size="small">取消</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- ============================================================ -->
    <!-- ================= 列表，表单 ========================== -->
    <!-- ============================================================ -->
    <div class="incolumn_from">
      <el-table :data="tableData" style="width: 100%;" :height="autoHeightTable" stripe>
        <el-table-column label="序号" align="center" type="index" width="70"></el-table-column>
        <el-table-column prop="logisticsno" label="物流单号" align="center"></el-table-column>
        <el-table-column prop="enteraprisename" label="产品名称" align="center"></el-table-column>
        <el-table-column prop="processtype" label="产品类型" align="center"></el-table-column>
        <el-table-column prop="total" label="当前库存" align="center"></el-table-column>
        <el-table-column prop="Num" label="采购数量" align="center"></el-table-column>
        <el-table-column prop="deliveryon" label="下单日期" align="center"></el-table-column>
        <el-table-column prop="Mtype" label="订单类型" align="center"></el-table-column>
        <el-table-column prop="state" label="状态" align="center"></el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button
              type="warning"
              size="small"
              v-show="scope.row.state == '待入库'"
              @click="Apply(scope.row.logisticsno)"
            >申请入库</el-button>
            <el-button
              type="warning"
              size="small"
              v-show="scope.row.state == '待结算'"
              @click="Settlement(scope.row,0)"
            >结算申请</el-button>
            <el-button type="primary" size="small" @click="details(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- ============================================================ -->
      <!-- ==================== 分页 ================ -->
      <!-- ============================================================ -->
      <div class="bottom_slate">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="current"
          :page-size="pagesize"
          @current-change="handleCurrentChange"
          :total="total"
        ></el-pagination>
      </div>
      <!-- ============================================================ -->
      <!-- ============= 入库弹框 ============== -->
      <!-- ============================================================ -->
      <el-dialog :visible.sync="dialogTableBt" :modal-append-to-body="false" width="1000px">
        <div class="herd_bud"></div>
        <div class="from_cg">申请入库</div>
        <br />
        <p class="Purchase_Division"></p>
        <div class="demo-form-inline">
          <el-form :model="formInlineYa" :inline="true" class="demo-form-inline" label-width="83px">
            <el-form-item label="企业名称">
              <el-input v-model="formInlineYa.enteraprisename"></el-input>
            </el-form-item>
            <el-form-item label="收货人">
              <el-input v-model="formInlineYa.consignee"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input v-model="formInlineYa.tel"></el-input>
            </el-form-item>
            <el-form-item label="收货地址">
              <el-input v-model="formInlineYa.address"></el-input>
            </el-form-item>
          </el-form>
          <div class="tow_tab_hed">货物信息</div>
          <br />
          <p class="Purchase_Division"></p>
          <br />
          <el-table
            :data="tableDataBl"
            style="width: 100%;background-color:#fff"
            :height="260"
            :max-height="330"
            stripe
          >
            <el-table-column label="序号" align="center" type="index" width="70"></el-table-column>
            <el-table-column prop="materialno" label="物料代码" align="center"></el-table-column>
            <el-table-column prop="materialname" label="物料名称" align="center"></el-table-column>
            <el-table-column prop="unit" label="计量单位" align="center"></el-table-column>
            <el-table-column prop="number" label="发货数量" align="center"></el-table-column>
            <el-table-column label="入库数量" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.innumber"></el-input>
              </template>
            </el-table-column>
          </el-table>
          <p class="Purchase_Division"></p>
          <div class="up_phtos">
            上传外协表格
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :modal-append-to-body="false"
              :close-on-click-modal="false"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </div>
          <div class="from_towbs">
            <el-button @click="Confirm" type="primary" size="small">确认</el-button>
            <el-button @click="dialogTableBt = false" type="info" size="small">取消</el-button>
          </div>
        </div>
      </el-dialog>
      <!-- ============================================================ -->
      <!-- ============= 详情弹框 ======================= -->
      <!-- ============================================================ -->
      <el-dialog :visible.sync="dialogTableVBsy" :modal-append-to-body="false" width="1000px">
        <div class="herd_bud"></div>
        <div class="from_cg">结算详情</div>
        <br />
        <p class="Purchase_Division"></p>
        <div class="demo-form-inline">
          <el-form :model="formInlineBd" :inline="true" class="demo-form-inline" label-width="83px">
            <el-form-item label="企业名称">
              <el-input v-model="formInlineBd.enteraprisename"></el-input>
            </el-form-item>
            <el-form-item label="收货人">
              <el-input v-model="formInlineBd.consignee"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input v-model="formInlineBd.tel"></el-input>
            </el-form-item>
            <el-form-item label="收货地址">
              <el-input v-model="formInlineBd.address"></el-input>
            </el-form-item>
            <el-form-item label="总计金额">
              <el-input v-model="formInlineBd.total"></el-input>
            </el-form-item>
            <el-form-item label="废料金额">
              <el-input v-model="formInlineBd.waste"></el-input>
            </el-form-item>
          </el-form>
          <div class="tow_tab_hed">结算明细</div>
          <br />
          <p class="Purchase_Division"></p>
          <br />
          <el-table
            :data="tableDatBtrs"
            style="width: 100%;background-color:#fff"
            :height="250"
            :max-height="300"
            stripe
          >
            <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
            <el-table-column prop="tuhao" label="图号" align="center"></el-table-column>
            <el-table-column prop="materialname" label="物料名称" align="center"></el-table-column>
            <el-table-column prop="tonnage" label="机床吨位" align="center"></el-table-column>
            <el-table-column prop="goodsnumber" label="收货数量" align="center"></el-table-column>
            <el-table-column prop="price" label="单计(元)" align="center"></el-table-column>
            <el-table-column prop="toatl" label="小计(元)" align="center"></el-table-column>
          </el-table>
          <p class="Purchase_Division"></p>
          <div class="up_ipt">
            <el-row :gutter="10">
              <el-col :span="6">
                <el-form :model="formInlineBd" class="demo-form-inline" label-width="83px">
                  <el-form-item label="合计结算">
                    <el-input v-model="formInlineBd.settlement"></el-input>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <div class="up_phto">
              上传凭证
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
            </div>
          </div>
          <div class="from_towbs">
            <el-button @click="ConfirmTs" v-show="shows" type="primary" size="small">确认</el-button>
            <el-button @click="dialogTableVBsy = false" type="info" size="small">取消</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  computed: {
    autoHeightTable() {
      return document.documentElement.scrollHeight - 251 - 78;
    }
  },
  data() {
    return {
      shows: false,
      optionBts: [],
      values: "",
      //上传图片
      dialogImageUrl: "",
      dialogVisible: false,
      radio: "快递",
      // 弹框
      dialogTableVisible: false,
      dialogTableBt: false,
      dialogTableVBsy: false,
      //文本框+
      formInline: {
        key: ""
      },
      formInlineBp: {},
      formInlineYa: {},
      formInlineBd: {},
      //列表
      tableData: [],
      tableDataBy: [],
      tableDataBl: [{}],
      tableDatBtrs: [],
      //分页
      start: "",
      end: "",
      total: 1,
      current: 1,
      pagesize: 10,
      and: ""
    };
  },
  created() {
    this.getData(0);
    this.getDatas();
    // this.getDataBys();
    this.getDataTans();
  },
  methods: {
    //快递公司接口
    getDataTans() {
      axios("/apis/CommondMethod.asmx/DropDown?index=1&member=快递公司").then(
        ({ data }) => {
          var datas = this.$x2js.xml2js(data);
          var list = JSON.parse(datas.string.__text);
          this.optionBts = list;
        }
      );
    },
    //表单接口
    getData(page) {
      var obj = {
        start: this.start,
        end: this.end,
        key: this.formInline.key,
        pn: page,
        PerPageSize: 10
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/PurchasingManagement.asmx/List_Purchasing?index=6&jsondata=" +
          objs +
          "&empno=" +
          this.empno
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        console.log(list);
        this.tableData = [];
        this.tableData = list;
        //日期解析
        for (var i = 0; i < list.length; i++) {
          var ddd = new Date(parseInt(list[i].deliveryon.substr(6, 13)));
          var y = ddd.getFullYear();
          var m = ddd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var minute = ddd.getMinutes();
          minute = minute < 10 ? "0" + minute : minute;
          var second = ddd.getSeconds();
          second = second < 10 ? "0" + second : second;
          list[i].deliveryon = y + "-" + m + "-" + second;
        }
      });
    },
    getDatas() {
      var obj = {
        start: "",
        end: "",
        key: this.formInline.key,
        pn: 0,
        PerPageSize: 10000
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/PurchasingManagement.asmx/List_Purchasing?index=6&jsondata=" +
          objs +
          "&empno=" +
          this.empno
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        this.total = list.length;
      });
    },
    //分页
    handleCurrentChange(e) {
      this.getData(e - 1);
    },
    // 日期改变
    chage(e) {
      console.log(e);
      if (e) {
        this.start =
          e[0].getFullYear() +
          "-" +
          (e[0].getMonth() + 1) +
          "-" +
          e[0].getDate();
        this.end =
          e[1].getFullYear() +
          "-" +
          (e[1].getMonth() + 1) +
          "-" +
          e[1].getDate();
      } else {
        this.start = "";
        this.end = "";
      }
    },
    // 筛选
    onsubmit() {
      this.getData(0);
    },
    //新增
    Newly(logisticsno) {
      this.dialogTableVisible = true;
    },
    //新增确认================接口
    getDataBys() {
      var obj = {
        mess: this.formInlineBp,
        Dahao: this.formInlineBp.Dahao,
        values: this.optionBts.values,
        goods: this.tableDataBy
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/PurchasingManagement.asmx/Save_Purchase?index=6&jsondata=" + objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        this.goods.materialno = this.tableDataBy.materialno;
        this.goods.materialname = this.tableDataBy.materialname;
        this.goods.picihao = this.tableDataBy.picihao;
        this.goods.unit = this.tableDataBy.unit;
        this.goods.number = this.tableDataBy.number;
      });
      this.dialogTableVisible = false;
    },
    //入库
    Apply(logisticsno) {
      this.dialogTableBt = true;
      // this.logisticsno = and;
      this.no = logisticsno;
      axios(
        "/apis/PurchasingManagement.asmx/Det_Purchase?index=6" +
          "&no=" +
          logisticsno
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        this.formInlineYa = list.logistics;
        this.tableDataBl = list.goods;
      });
    },
    //入库----确认
    Confirm() {
      var obj = {
        enteraprisename: this.formInlineYa.enteraprisename,
        consignee: this.formInlineYa.consignee,
        tel: this.formInlineYa.tel,
        address: this.formInlineYa.address,
        goods: this.tableDataBl
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/PurchasingManagement.asmx/Save_Purchase?index=61&jsondata=" +
          objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        this.tableDataBl = list.goods;
        this.innumber = this.tableDataBl.innumber;
      });
      this.dialogTableBt = false;
    },
    //结算
    Settlement(logAd, a) {
      this.dialogTableVBsy = true;
      this.shows = true;
      this.no = logAd.logisticsno;
      axios(
        "/apis/PurchasingManagement.asmx/Det_Purchase?index=6" +
          "&no=" +
          this.no
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        this.tableDatBtrs = list.settlement;
        var Subtotal = 0;
        for (var i = 0; i < this.tableDatBtrs.length; i++) {
          Subtotal += this.tableDatBtrs[i].toatl;
        }
        this.formInlineBd.settlement = Subtotal;
      });
    },
    //结算申请-----------确认
    ConfirmTs() {
      var obj = {
        logisticsno: this.tableData.logisticsno,
        goods: this.tableDatBtrs
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/PurchasingManagement.asmx/Save_Purchase?index=62&jsondata=" +
          objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
      });
      this.dialogTableVBsy = false;
    },
    //详情
    details(logisticsno, a) {
      this.dialogTableVBsy = true;
      this.tableDatBtrs = [];
      this.tableDatBtrs.push(logisticsno);
      this.no = logisticsno.logisticsno;
      axios(
        "/apis/PurchasingManagement.asmx/Det_Purchase?index=6" +
          "&no=" +
          logisticsno.logisticsno
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        this.formInlineBd = list.logistics;
        this.formInlineBd.total = list.mes.total;
        this.formInlineBd.waste = list.mes.waste;
        this.tableDatBtrs = list.settlement;
        var Subtotal = 0;
        for (var i = 0; i < this.tableDatBtrs.length; i++) {
          Subtotal += this.tableDatBtrs[i].toatl;
        }
        this.formInlineBd.settlement = Subtotal;
      });
    },
    //上传
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
//第一块儿
.incolumn_countr {
  margin-left: 15px;
  height: 50px;
  width: 97%;
  background-color: white;
  padding-top: 10px;
}
.Purchase_Division {
  border: 0.5px solid $linecolor;
}

.block {
  margin-top: -10px;
  margin-left: 20px;
  cursor: pointer;
}
.block_Math {
  cursor: pointer;
}

//第二块
.incolumn_from {
  margin-top: 15px;
  margin-left: 15px;
  width: 98%;
  height: 100%;
}
.from_bt {
  margin-top: -20px;
  margin-left: 10px;
  font-size: $font-size-medium-x;
  font-weight: bold;
}
.tow_tab_hed {
  font-size: $font-size-medium-x;
  font-weight: bold;
}

.from_tab_btn {
  margin-top: 10px;
  text-align: center;
}
.from_cg {
  font-size: $font-size-medium-x;
  font-weight: bold;
  margin-top: -20px;
  margin-left: 10px;
}
.el-table td,
.el-table th {
  padding: 20px 0;
}
.from_tow {
  margin-top: 100px;
}
.demo-form-inline {
  margin-top: 10px;
}
.from_tab_wb3 {
  width: 30%;
}
.from_tab_zt2 {
  margin-left: 10px;
  color: $font-size-medium-x;
  font-size: $font-size-medium;
}
.from_towb {
  margin-top: 10px;
}
.from_towbs {
  margin-top: 20px;
  text-align: center;
}
.ebtn {
  float: right;
  margin-right: 20px;
}
.bottom_slate {
  height: 60px;
  line-height: 40px;
  text-align: center;
}
.herd_bud {
  margin-top: -40px;
  height: 20px;
  width: 5px;
  background-color: rgb(52, 144, 231);
}
.up_phto {
  margin-top: -50px;
  text-align: center;
}
.up_phtos {
  margin-top: 20px;
  text-align: center;
}
</style>
